<template>
  <div id="PackagePurchaseList">
    <el-row>
      <el-col :span="4">
        <div class="div_border_title">
          <h2>套餐使用情况</h2>
        </div>
      </el-col>
    </el-row>
    <div class="search-box">
      <el-form inline>
        <el-form-item label="使用状态">
          <el-select v-model="use_state">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="search" @click="doSearch()">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="purchaseList" border highlight-current-row fit @row-click="clickRow">
      <el-table-column type="index" :label="$t('index')" width="100" align="center"></el-table-column>
      <el-table-column prop="billing_items_title" label="计费项名称" align="center"></el-table-column>
      <el-table-column prop="user_group" label="计费项用户类型" :formatter="formatterUserType"
                       align="center"></el-table-column>
      <el-table-column prop="end_date" label="开始时间" align="center"></el-table-column>
      <el-table-column prop="update_time" label="结束时间" align="center"></el-table-column>
      <el-table-column prop="use_state" label="使用状态" :formatter="formatterUser" align="center"></el-table-column>
    </el-table>
    <el-pagination @current-change="handleCurrentChange" layout="total, prev, pager, next" :total="total"
                   class="table-page-style"></el-pagination>
  </div>
</template>
<script>
  import { postDataToServer } from '../../assets/js/post.js'
  import { getStaticMapList } from '../../assets/js/GlobeDefine.js'

  export default {
    name: 'PackagePurchaseList',
    data () {
      return {
        currentID: '',
        currData: '',
        page_no: 1,
        total: 0,
        purchaseList: [],
        use_state: '',
        options: [{
          value: '0',
          label: '未使用'
        }, {
          value: '1',
          label: '使用中'
        }, {
          value: '2',
          label: '已使用'
        }],
        searchData: {
          use_state: '',
        }
      }
    },
    created () {
      this.getPurchaseList(1)
    },
    methods: {
      clickRow (row, event, column) {
        this.currentID = row.id
        this.currData = row
      },
      handleCurrentChange (pageNum) {
        this.page_no = pageNum
      },
      getPurchaseList (pageNum) {
        let _this = this
        let params = new Object()
        params.page_no = pageNum
        params.page_size = 20
        postDataToServer('PACKAGE_ORDER_USE_GET', params).then((data) => {
          if (data.status === 0) {
            _this.purchaseList = data.data_list
            _this.total = data.total_results
          }
        })
      },
      doSearch () {
        let _this = this
        let params = new Object()
        params.page_no = 1
        params.page_size = 20
        params.use_state = _this.use_state
        postDataToServer('PACKAGE_ORDER_USE_GET', params).then((data) => {
          if (data.status === 0) {
            _this.purchaseList = data.data_list
            _this.total = data.total_results
          }
        })

      },
      formatterUserType (row, column) {
        return getStaticMapList('user_group', row.user_group)
      },
      formatterUser (row, column) {
        return getStaticMapList('use_state', row.use_state)
      },
    },
    watch: {
      page_no (val, oldVal) {
        this.getBoothDataList(val)
      }
    }
  }
</script>
<style scoped>
  #PackagePurchaseList {
    margin: 1em;
  }
</style>
